<!-- 课程详情 -->
<template>
  <div class="container">
    <Nav></Nav>
    <div class="course_infor">
      <!-- <CourseContent></CourseContent> -->
      <div class="course_content">
        <div class="course_title">
          <div class="title_course">
            <router-link tag="li" to="/">首页</router-link>
            <li><img src="../../assets/img/quick.png" alt=""></li>
            <!-- <router-link tag="li" to="/exam?id=2340&cid=0">招考公告</router-link> -->
            <!-- <li><img src="../../assets/img/quick.png" alt=""></li> -->
            <!-- <li>线下课程</li> -->
            <!-- <li><img src="../../assets/img/quick.png" alt=""></li> -->
            <li>课程详情</li>
          </div>
          <div class="course_tip">
            <div class="tip_left">
              <div class="tip_top">
                <img :src="list.banner_img" alt="">
              </div>
              <div class="tip_bottom">
                <span>咨询电话</span>
                <span>400-115-1160</span>
              </div>
            </div>
            <div class="tip_right">
              <!-- <li>{{list.exam_name}}</li> -->
              <li>
                <label for="">上课地点</label>
                <span>{{course_info.learn_address}}</span>  
              </li>
              <li>
                <label for="">考试类型</label>
                <span>{{course_info.exam_type}}</span>  
              </li>
              <!-- <li>包含科目：行测文、行测理</li> -->
              <li>
                <label for="">上课时间</label>
                <span>15天 ( {{course_info.start_time}}到{{course_info.end_time}} )</span>  
              </li>
              <li>
                <label for="">价格</label>
                <span>￥{{course_info.course_money}}</span>
              </li>
              <li v-show="course_info.description">
                <label for="">
                  <img src="../../assets/img/orev.png" alt="">
                </label>
                <span>{{course_info.description}}</span>
              </li>
              <li>
                <label for="">课程类型</label>
                <span>
                  <p
                    v-for="(item, index) of lists"
                    :key="index"
                    :class="sIndex === index ? 'active' : ''"
                    @click="getClassInfo(index, item.id)">{{item.course_name}}</p>
                </span>
              </li>
              <li>
                <label for="">住宿</label>
                <span>
                  <p :class="course_info.is_combine === 0 ? 'active' : ''" v-if="course_info.is_combine === 0">无住宿</p>
                  <p :class="course_info.is_combine === 1 ? 'active' : ''" v-if="course_info.is_combine === 1">住宿</p>
                </span>
              </li>
              <li>
                <label for=""></label>
                <span @click="tapCode()">立即报名</span>
              </li>
            </div>
          </div>
        </div>
        <div class="course_list">
          <div class="course_left">
            <div class="titles" v-if="this.course_info.is_show_schedule">
              <li :class="tagIndex === 1 ? 'active' : ''" @click="tag(1)" >课程详情</li>
              <li :class="tagIndex === 2 ? 'active' : ''" @click="tag(2)" >课程表</li>
            </div>
            <div class="titles_img" v-if="isShow">
              <div class="titles_imgs" v-html="list.desc_img"></div>
            </div>
            <div class="tables" v-else>
              <div class="tables_title">
                <li>XXXX长线班</li>
                <li>03月25日~04月05日</li>
              </div>
              <div class="tables_content">
                <table cellspacing="0" cellpadding="0">
                  <thead>
                    <th>《</th>
                    <th  v-for="(item, index) of schedule_lists"
                    :key="index" v-show="item.course_date_point === 1">
                      <p>{{item.course_date}}</p>
                      <p>周{{item.week}}</p>
                    </th>
                    <th>》</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>上午</td>
                      <td
                        v-for="(items, i) of schedule_lists"
                        :key="i"
                        v-show="items.course_date_point === 1">
                        <!-- v-if="items.course_date_point === 1" -->
                        <p>{{items.teacher_name}}</p>
                        <p>{{items.course_introduce}}</p>
                      </td>
                    </tr>
                    <tr>
                      <td>下午</td>
                      <td
                        v-for="(items, i) of schedule_lists"
                        :key="i"
                        v-show="items.course_date_point === 2">
                        <!-- v-if="items.course_date_point === 1" -->
                        <p>{{items.teacher_name}}</p>
                        <p>{{items.course_introduce}}</p>
                      </td>
                    </tr>
                    <tr>
                      <td>晚上</td>
                      <td
                        v-for="(items, i) of schedule_lists"
                        :key="i"
                        v-show="items.course_date_point === 3">
                        <!-- v-if="items.course_date_point === 1" -->
                        <p>{{items.teacher_name}}</p>
                        <p>{{items.course_introduce}}</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="course_right">
            <div class="right_list" v-for="(item, index) of teacher_lists" :key="index">
              <li>
                <p><img :src="item.headimgurl" alt=""></p>
                <p>{{item.teacher_name}}</p>
              </li>
              <li>{{item.description}}</li>
            </div>
          </div>
        </div>
        <div class="code" v-show="isCode">
          <p @click="close()">关闭</p>
          <img src="../../assets/img/serve.jpg" alt="">
          <p>点击  课程--在线选座  报名</p>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Nav from '../../components/Nav/nav'
import Bottom from '../../components/Bottom/bottom'
// import CourseContent from '../../components/exam/courseContent'
export default {
  name: 'courseInfor',
  data () {
    return {
      isShow: 1,
      id: 0,
      list: [],
      lists: [],
      course_info: [],
      schedule_lists: [],
      teacher_lists: [],
      weekList: [],
      dataList: [],
      sIndex: 0,
      tagIndex: 1,
      isCode: false
    }
  },

  created () {},

  mounted () {
    this.id = this.$route.params.id
    this.testList()
  },

  components: {
    Nav,
    Bottom
    // CourseContent
  },

  computed: {},

  methods: {
    // 关闭
    close () {
      this.isCode = false
    },
    // 点击立即报名显示二维码
    tapCode () {
      this.isCode = true
    },
    // tab切换
    tag (type) {
      this.tagIndex = type
      if (type === 1) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // 考试列表
    testList () {
      this.$http.post('/course/getExamDetail', {
        exam_id: this.id
      }).then((res) => {
        this.list = res.data.data
        this.lists = res.data.data.course_lists
        this.getClassInfo(this.sIndex, this.lists[0].id)
        // this.getClassInfo()
      })
    },
    // 课程详情
    getClassInfo (index, id) {
      this.sIndex = index
      this.$http.post('/course/getCourseDetail', {
        course_id: id
      }).then((res) => {
        this.course_info = res.data.data.course_info
        this.schedule_lists = res.data.data.schedule_lists
        this.teacher_lists = res.data.data.teacher_lists
        this.schedule_lists.map((res, index) => {
          this.schedule_lists[index].course_date = res.course_date.split('-')[1] + '-' + res.course_date.split('-')[2]
        })
        var time = this.getDay(this.course_info.start_time)
        this.course_info.start_time = time
        var time1 = this.getDay(this.course_info.end_time)
        this.course_info.end_time = time1
      })
    },
    // 获取时间戳转年月日
    getDay (data) {
      var date = new Date(data * 1000)
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10) ? '0' + (date.getDate()) : date.getDate()
      return M + D
    }
  }
}

</script>
<style lang='scss' scoped>
.container{
  min-width: 1200px;
  background: rgb(234, 238, 239);
}
.course_infor{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin: 40px auto 80px;
}
// 课程详情下面的
.course_list{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;
}
.course_left{
  width:895px;
  height:auto;
  background:rgba(255,255,255,1);
}
.titles_img{
  box-sizing: border-box;
  padding: 30px;
}
.titles_imgs{
  max-width: 833px;
  word-break: break-all;
  overflow: hidden;
}
img{
  width: 100%;
}
.code{
  width: 300px;
  height: 330px;
  position: fixed;
  z-index: 9;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 2px 5px 10px 2px #cccccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.code p{
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-right: 0px;
  cursor: pointer;
  text-align: center;
}
.code p:first-child:hover{
  background: #cccccc;
  cursor: pointer;
}
.code img{
  width: 250px;
  height: 250px;
}
.course_content{
  width: 100%;
  height: auto;
}
.course_title{
  width: 1200px;
  // height: 516px;
  background:rgba(255,255,255,1);
}
.title_course{
  width: 100%;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  padding: 0px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.title_course li{
  margin-left: 8px;
  cursor: pointer;
}
.title_course li:first-child{
  margin-left: 0px;
}
.course_tip{
  width: 100%;
  // height: 467px;
  box-sizing: border-box;
  padding: 30px 24px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.tip_left{
  width: 484px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tip_top{
  width: 495px;
  height: 278px;
}
.tip_top img{
  width: 495px;
  height: 278px;
  // border-radius: 12px;
}
.tip_bottom{
  margin-top: 40px;
  width:484px;
  height:70px;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.tip_bottom span{
  font-size:14px;
  font-family:MicrosoftYaHei;
  color:rgba(34,34,34,1);
  line-height:19px;
}
.tip_bottom span:last-child{
  font-size:30px;
  font-family:DIN Alternate Bold;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:35px;
  letter-spacing:1px;
}
.tip_right{
  width: 612px;
}
.tip_right li{
  margin-top: 12px;
  font-size:14px;
  color:rgba(34,34,34,1);
  line-height:19px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tip_right li:nth-child(1){
  margin-top: 0px;
}
.tip_right li:nth-child(4){
  margin-top: 16px;
}
.tip_right li:nth-child(5){
  margin-top: 16px;
}
.tip_right li:nth-child(6){
  margin-top: 16px;
}
.tip_right li:nth-child(7){
  margin-top: 8px;
}
.tip_right li:nth-child(4) span{
  font-size:26px;
  font-family:DIN Alternate Bold;
  color:rgba(204,41,41,1);
  line-height:35px;
  letter-spacing:1px;
}
.tip_right li:nth-child(5){
  background:rgba(255,205,77,0.2);
  border-top: 1px dashed rgba(34, 34, 34, 1);
  border-bottom: 1px dashed rgba(34, 34, 34, 1);
}
.tip_right li label{
  width: 75px;
  color:rgba(136,136,136,1);
}
.tip_right li span{
  width: 530px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
// .tip_right li:nth-child(6){
//   display: flex;
//   flex-direction: row;
//   align-items: flex-start;
// }
.tip_right li:nth-child(6) span p{
  margin-right: 12px;
  padding: 0px 12px;
  line-height: 35px;
  background:rgba(250,250,250,1);
  border-radius:8px;
  // color: #ffffff;
  margin-bottom: 8px;
  cursor: pointer;
  border:1px solid rgba(240,240,240,1);
}
.tip_right li:nth-child(6) span p.active{
  background: rgba(24, 144, 255, 1);
  color: #ffffff;
}
.tip_right li:nth-child(7){
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tip_right li:nth-child(7) label{
  width: 75px;
}
.tip_right li:nth-child(7) span{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.tip_right li:nth-child(7) span p:first-child{
  margin-left: 0px;
}
.tip_right li:nth-child(7) span p{
  margin-left: 12px;
  padding: 0px 12px;
  line-height: 35px;
  background:rgba(250,250,250,1);
  border: 1px solid rgba(240,240,240,1);
  border-radius:8px;
  // color: #ffffff;
  cursor: pointer;
}
.tip_right li:nth-child(7) span p.active{
  background: #1890ff;
  color: #ffffff;
}
.tip_right li:last-child{
  margin-top: 30px;
}
.tip_right li:last-child span{
  width:174px;
  height:50px;
  background:linear-gradient(138deg,rgba(255,142,33,1) 0%,rgba(255,39,39,1) 100%);
  border-radius:25px;
  font-size:18px;
  font-family:HiraginoSansGB;
  font-weight:normal;
  color:rgba(255,255,255,1);
  line-height:50px;
  letter-spacing:1px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.titles{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 55px;
  line-height: 55px;
}
.titles li{
  margin-left: 30px;
  cursor: pointer;
}
.titles li:last-child{
  margin-left: 60px;
}
.titles li.active{
  // font-size:16px;
  color:rgba(24,144,255,1);
  line-height:55px;
  border-bottom: 2px solid rgba(24,144,255,1);
}
.course_right{
  width: 286px;
  height: auto;
}
.right_list{
  width: 286px;
  height: auto;
  background: #ffffff;
  box-sizing: border-box;
  padding: 20px 16px;
  margin-top: 20px;
}
.right_list li{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.right_list li p img{
  width: 62px;
  height: 62px;
  border-radius: 50%;
}
.right_list li p:last-child{
  margin-left: 12px;
}
.right_list li:last-child{
  margin-top: 12px;
  font-size:14px;
  color:rgba(34,34,34,1);
  line-height:24px;
  letter-spacing:1px;
}
.right_list:first-child{
  margin-top: 0px;
}
.tables{
  width: 100%;
  height: auto;
}
.tables_title{
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 30px;
  height: 68px;
  line-height: 68px;
}
.tables_title li{
  font-size:12px;
  color:rgba(34,34,34,1);
  line-height:16px;
}
.tables_title li:last-child{
  margin-left: 20px;
}
.tables_content{
  width: 100%;
  height: auto;
}
.tables_content table{
  width: 100%;
}
.tables_content table thead th:first-child{
  width: 24px;
  height: 70px;
  background:rgba(240,240,240,1);
}
.tables_content table thead th:last-child{
  width: 24px;
  height: 70px;
  background:rgba(240,240,240,1);
}
.tables_content table thead th{
  width: 121px;
  height: 70px;
  background:rgba(250,250,250,1);
}
.tables_content table tbody tr{
  margin-top: 10px;
}
.tables_content table tbody tr td:first-child{
  width: 24px;
  height: 70px;
  text-align: center;
}
.tables_content table tbody tr td{
  padding: 8px;
  box-sizing: border-box;
}
.tables_data{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tables_data li{
  width: 121px;
  height: 70px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:rgba(250,250,250,1);
}
.tables_data li p{
  height: 32px;
  line-height: 32px;
}
.tables_data span{
  width: 24px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background:rgba(240,240,240,1);
}
// 列表
.tables_list{
  width: 895px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tables_list div{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 871px;
  overflow: hidden;
  margin-left: -24px;
}
.tables_list li:first-child{
  width: 24px;
  height: 83px;
  text-align: center;
  background:rgba(240,240,240,1);
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.tables_list li{
  width: 121px;
  height: 83px;
  // text-align: center;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background:rgba(255,245,245,1);
  box-sizing: border-box;
  padding: 8px;
  margin-top: 10px;
}
.tables_list li p{
  width: 121px;
  height: 32px;
  line-height: 32px;
  // text-align: left;
}
.tables_list li p:last-child{
  height: 32px;
  line-height: 16px;
}
.tables_list span{
  width: 24px;
  height: 83px;
  text-align: center;
  background:rgba(240,240,240,1);
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>
